<template>
    <div class="rollNum-main">
        <ul>
            <!-- 需要显示6列 -->
            <li ref="li" v-for="i in 4" :key="i">
                <!-- 每列中的10行数字 -->
                <span v-for="num in 10" :key="num">{{ num - 1 }}</span>
            </li>
            <li class="unit">{{unit}}</li>
        </ul>
    </div>


</template>

<script>
export default {
    name: "RollNum",
    components: {},
    props: {
        num: {
            type: Number,
            default: 0,
        },
        unit:{
            type: String,
            default: "人",
        }
    },
    data() {
        return {
        };
    },
    computed: {},
    created() {
        setTimeout(() => {
            this.toOrderNum(this.num, this.$refs.li);
        },500);

    },
    mounted() {},
    watch: {},

    methods: {
        // 处理数字
        toOrderNum(num, el) {
            num = num.toString();
            // 把数变成字符串
            if (num.length < 4) {
                num = "0" + num; // 如未满八位数，添加"0"补位
                this.toOrderNum(num, el); // 递归添加"0"补位
            } else if (num.length === 4) {
                const numArr = num.split(""); // 将其便变成数据，渲染至滚动数组
                for (let i = 0; i < el.length ; i++) {
                    let ty = numArr[i];
                    el[i].style.transform = `translate(0%, -${ty * 100}%)`;
                }
            } else {
                this.$message.warning("数字过大，显示异常，请联系客服");
            }
        },
    },
};
</script>

<style scoped lang="scss">
@function pxToRem($val) {
    @return $val/100 + rem;
}
ul {
    display: flex;
    justify-content: center;
    overflow: hidden;
    li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: pxToRem(28);
        height: pxToRem(38);
        flex-direction: column;
        transition: transform 1s ease-in-out;
        list-style-type: none;
        margin-left: pxToRem(5);
        border-radius: pxToRem(3);
        font-size: pxToRem(30);
        font-family: Gothic!important;
        &.unit{
            width: auto;
            height: pxToRem(38);
            line-height: pxToRem(38);
            font-size: pxToRem(20);
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #01DFF3;
        }
        span {
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            font-weight: 400;
            color: #FFFFFF;
        }
    }
}

</style>
